<template>
  <div>
    <el-checkbox
      v-if="options && options.length"
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      :disabled="disabled"
      @change="handleCheckAllChange"
    >
      全选
    </el-checkbox>
    <el-checkbox v-if="!options || options.length === 0" disabled>
      无选项
    </el-checkbox>
    <div style="margin: 15px 0"></div>

    <el-checkbox-group
      v-model="checkedValues"
      :disabled="disabled"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox
        v-for="item in optionsData"
        :key="getValue(item, keyV, item)"
        :value="getValue(item, keyV, item)"
        :label="getValue(item, keyV, item)"
        :disabled="getValue(item, disabledKey, false)"
      >
        {{ getValue(item, labelV, item) }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
  import ignoreErrorAttr from '../../utils/jsex'

  export default {
    name: 'AppCheckboxGroup',
    props: {
      valueList: {
        type: Array,
        default: function () {
          return []
        },
      },
      options: {
        type: Array,
        default: function () {
          return []
        },
      },
      keyV: {
        type: String,
        default: function () {
          return undefined
        },
      },
      labelV: {
        type: String,
        default: function () {
          return undefined
        },
      },
      disabledKey: {
        type: String,
        default: function () {
          return 'disabled'
        },
      },
      disabled: {
        type: Boolean,
        default: function () {
          return false
        },
      },
    },
    data() {
      return {
        checkAll: false,
        checkedValues: this.valueList,
        isIndeterminate: true,
      }
    },
    computed: {
      optionsData() {
        return this.options
      },
    },
    watch: {
      checkedValues: {
        handler(value, oldValue) {
          this.$emit('update:valueList', value)
        },
        deep: true,
        immediate: true,
      },
      valueList: {
        handler(value, oldValue) {
          this.checkedValues = value
        },
        deep: true,
        immediate: true,
      },
    },
    created() {},
    methods: {
      handleCheckAllChange(val) {
        // debugger
        this.checkedValues = val ? this.getValues(this.options, this.keyV) : []
        this.isIndeterminate = false
      },
      handleCheckedCitiesChange(value) {
        // debugger
        let checkedCount = value.length
        this.checkAll = checkedCount === this.options.length
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.options.length
      },
      getValues(objs, key) {
        let vs = []
        for (let objsKey in objs) {
          vs.push(this.getValue(objs[objsKey], key, objs[objsKey]))
        }
        return vs
      },
      getValue(obj, search = '', re = '') {
        return ignoreErrorAttr(obj, search, re)
      },
    },
  }
</script>

<style scoped></style>
